<!-- AsideCom.vue -->
<script>

import { Location, House, User } from '@element-plus/icons-vue'
export default {
  data () {
    return {

    }
  },
  methods: {
    open () {
      // this.$router.push('/manager/managerlist')
    }
  },
  components: {
    Location,
    House,
    User
  },
  // 接收父组件传递过来的属性
  props: ['collapse']
}
</script>
<template>
  <!--
          如果需要实现我们 menu 点击可以修改页面，那么我们需要在 menu 组件中添加 router
          属性，第二步操作是在 menu-item 中添加属性 index,其对应的值是 要跳转的路径
     -->

  <!-- collapse 标签菜单是否需要展开 -->
  <el-menu @open="open" router :collapse="collapse" class="el-menu-vertical-demo">
    <el-menu-item index="/">
      <el-icon>
        <House />
      </el-icon>
      <template #title>
        <span>首页</span>
      </template>
    </el-menu-item>

    <el-sub-menu index="/manager">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>账号管理</span>
      </template>

      <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
      <el-menu-item index="/manager/userlist">用户列表</el-menu-item>
    </el-sub-menu>


    <el-sub-menu index="/banner">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>轮播图管理</span>
      </template>

      <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
      <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
    </el-sub-menu>


  </el-menu>
</template>
